<template>
  <div class="home">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">档案表</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/itemLists">档案管理</a></el-breadcrumb-item>
      <el-breadcrumb-item>归档室</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="tab">
      <div
        style="margin: 10px auto; text-align: center; color: rgb(104, 4, 13)"
      >
        归档
      </div>
      <el-form
        ref="items"
        :model="items"
        :rules="rules"
        label-width="80px"
        size="mini"
      >
        <el-form-item prop="name" label="姓名:">
          <el-input v-model="items.name"></el-input>
        </el-form-item>
        <el-form-item label="性别:">
          <el-switch
            active-text="男"
            inactive-text="女"
            active-color="#5B7BFA"
            inactive-color="#dadde5"
            v-model="items.onSale"
          >
          </el-switch>
        </el-form-item>
        <el-form-item prop="createat" label="出生日期">
          <el-col :span="11">
            <el-form-item>
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="items.createat"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item prop="desc" label="个人简介">
          <el-input type="textarea" v-model="items.desc"></el-input>
        </el-form-item>
        <el-form-item prop="price" label="代号">
          <el-input v-model.number="items.price"></el-input>
        </el-form-item>
        <el-form-item label="画像">
          <el-upload
            action="/api/upload"
            list-type="picture-card"
            :auto-upload="false"
            ref="pictureUpload"
          >
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{ file }">
              <img
                class="el-upload-list__item-thumbnail"
                :src="file.url"
                alt=""
              />
              <span class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-preview"
                  @click="handlePictureCardPreview(file)"
                >
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleDownload(file)"
                >
                  <i class="el-icon-download"></i>
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleRemove(file)"
                  :on-success="handleAvatarSuccess(file)"
                >
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </el-form-item>
        <el-form-item label="生平事迹" prop="itemDesc">
          <quill-editor
            ref="text"
            v-model="items.content"
            class="myQuillEditor"
            :options="editorOption"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
import { additem } from '../../api/index'
export default {
  data () {
    return {
      items: {
        name: '',
        onSale: 'true',
        createat: '',
        desc: '',
        price: '',
        thumb: '',
        content: null
      },
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
        ],
        createat: [
          {
            type: 'date',
            required: true,
            message: '请选择日期',
            trigger: 'change'
          }
        ],
        desc: [{ required: true, message: '请填个人简介', trigger: 'blur' }],
        price: [{ required: true, message: '请填写代号', trigger: 'blur' }]
      },
      editorOption: {}
    }
  },
  methods: {
    submit () {
      console.log(this.items)
      // 富文本内容
      console.log(this.$refs.text.value)
      this.items.content = this.$refs.text.value
      additem().then((res) => {
        if (res.data.code === 200) {
          this.$message({
            message: '档案增添成功',
            type: 'success',
            duration: 1000,
            center: true,
            onClose: () => this.$router.replace('/itemLists')
          })
        }
      })
    },
    // 图片上传
    // 删除
    handleRemove (file) {
      this.$refs.pictureUpload.handleRemove(file)
    },
    // 放大
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
      console.log('啥时候触发？？？？？？？')
    },
    // 下载
    handleDownload (file) {},
    handleAvatarSuccess (file) {
      // console.log('试试')
      this.items.thumb = file.url
    }
  },
  components: { quillEditor }
}
</script>
<style scoped>
.tab {
  width: 800px;
  margin: 30px auto;
  padding: 20px;
  border: 1px rgb(233, 104, 13) dashed;
}
</style>
